<template>
  <div class="container">
    <div class="selectGroup">
      <el-cascader
        v-model="selectGroupId"
        placeholder="组别"
        size="small"
        :options="groupTypeOptions"
        ref="refSelect"
        :props="{
          checkStrictly: true,
          value: 'groupId',
          label: 'groupName',
          emitPath: false,
        }"
        @change="updateGroupInfo"
      ></el-cascader>
    </div>
    <groupCard ref="groupCard" :groupId="selectGroupId" />
    <!-- 成员信息 -->
    <group-member ref="groupMember" :groupId="selectGroupId" />
  </div>
</template>

<script>
import GroupCard from "./groupCard.vue";
import GroupMember from "./groupMemberCard.vue";
export default {
  name: "structure-card",
  components: {
    GroupCard,
    GroupMember,
  },
  props: {},
  watch: {
    selectGroupId() {//  v-model="areaId"
      if (this.$refs.refSelect) { //ref="refHandle"是否存在
        this.$refs.refSelect.dropDownVisible = false; //监听值发生变化就关闭它
      }
    },
  },

  data() {
    return {
      searchWord: "",
      file: "",
      fileList: [],
      selectGroupId: 0,
      groupTypeOptions: [],
      uploadUrl: `${this.HOST}/admin/api/uploadUserModel`,
      token: {
        Authorization: window.sessionStorage.getItem("token"),
      },
    };
  },

  created() {
    this.getLevelGroupList();
  },

  methods: {
    async getLevelGroupList() {
      const res = await this.$axios.get(`${this.HOST}/group/api/childNode`);
      // const res = await this.$axios.get(`${this.HOST}/group/api/groupTree`);
      if (res.data.meta.code == 200) {
        let arr = [];
        arr.push(res.data.data.group);
        this.groupTypeOptions = arr;
        this.selectGroupId = arr[0].groupId;
        this.updateGroupInfo();
        console.log("组别获取成功！", this.groupTypeOptions);
        // console.log(this.queryInfo.groupId);
      } else if (res.status != 200) {
        this.$message({
          message: "获取失败！",
          type: "error",
        });
      }
    },
    updateGroupInfo() {
      console.log("new gid", this.selectGroupId);
      this.$refs.groupCard.updateGroupId(this.selectGroupId);
      this.$refs.groupMember.updateGroupId(this.selectGroupId);
    },
  },
};
</script>

<style lang="less" scoped>
.header {
  color: white;
  font-size: 28px;
  font-weight: bold;
  width: 100%;
  text-align: center;
  height: 50px;
  margin-bottom: 10px;
}

.content {
  width: 75%;
  min-width: 800px;
  margin: auto;
  border-radius: 5px;
  padding: 20px;
  background-color: white;
  padding-right: 40px;
  font-weight: normal;
  padding-left: 40px;
  color: gray;
  margin-bottom: 20px;
}

.selectGroup {
  position: absolute;
  top: 95px;
  left: 11%;
}
</style>
